<script src="js/axios-0.19.0.js"></script>
<script src="js/vue.js"></script>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/common.css">

<div id="headerContainer">
    <!-- 头部 start -->
    <div class="top_banner">
        <div class="shortcut">
                <!-- 未登录状态  -->
                <div class="login_out" v-if="!isLogged">
                    <a href="login.html">登录</a>
                    <a href="register.html">注册</a>
                </div>
                <!-- 登录状态  -->
                <div class="login" v-else>
                    <span id="welcome">欢迎您！{{user.username}}</span>
                    <a href="home_index.html" class="collection">个人中心</a>
                    <a href="cart.html" class="collection">购物车</a>
                    <a href="javascript:void(0);" @click="logout">退出</a>
                </div>
        </div>
    </div>
    <!-- 首页导航 -->
    <div class="navitem">
        <ul class="nav">
             <li><a href="index.html">首页</a></li>
        <li v-for="category in categories">
            <a :href=`route_list.html?cid=${category.cid}`>{{category.cname}}</a>
        </li>
        <li><a href="favorite_rank.html">收藏排行榜</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    new Vue({
            el: "#headerContainer",
            data: {
                //默认是没有登录
                isLogged: false,
                //用户对象
                user: {},
                //分类的集合
                categories:[]

            },
            methods:{
                //检查用户是否已经登陆
                showLoginStatus(){
                    axios.get("/user/isLogged").then(resp=>{
                        var resultInfo = resp.data;
                        if(resultInfo.success){
                            //已经登陆
                            this.isLogged=true;
                            this.user =resultInfo.data;
                        }
                    })
                },
                //退出登录
                logout(){
                    axios.get("/user/logout").then(resp=>{
                        //根据状态码判断是否请求成功
                        if(resp.status==200){
                            location.href="/login.html";
                        }
                    })
                },
                //加载类别信息
                loadNavItems(){
                    axios.get("/category/findAll").then(resp=>{
                        this.categories= resp.data;
                        //this.categories = [{cid:1,cname:"周边游"},{cid:2,cname:"山水游"},...]
                    })
                }

            },
            created(){
                this.showLoginStatus();
                this.loadNavItems();
            }
        })
</script>